<template>
	<view style="overflow: hidden;">
		<view style="height: var(--status-bar-height);"></view>
		<view class="logo">
			<image src="../../static/jhc.PNG" mode=""></image>
		</view>
		<!-- <view class="status">教师</view> -->
		<view :user='user' class="login">
			<view class="input">
				<image src="../../static/img/icon_login_number@3x.png" mode=""></image>
				<input placeholder-class='input-placeholder' placeholder="请输入你的工号" v-model="user.number" type="text" />
			</view>
			<view style="margin-top: 20px;" class="input">
				<image src="../../static/img/icon_login_password@3x.png" mode=""></image>
				<input placeholder-class='input-placeholder' placeholder="请输入你的密码" v-model="user.password" type="password" />
			</view>
			<button @click="submit" :loading="isfromlogin" class="btn" style="width: 80%;" :class="{'success':islogin}">登录</button>
		</view>
	</view>
</template>

<script>
	import { login } from '../../request/user.js'
	import { setToken,removeToken } from '../../util/auth.js'
	export default {
		data() {
			return {
				islogin: true,
				isfromlogin: false,
				user:{
					number:'teatest',
					password: '000000'
				},
				page:''
			}
		},
		methods: {
			async submit(){
				try{
					this.isfromlogin = true;
					const res = await login(this.user);
					if(res != null){
						const {token,collegeName,staffNumber} = res;
						setToken(token,30000)
						this.$store.commit('user',{collegeName,staffNumber})
						// const page = uni.getStorageSync('page')
						// console.log(page)
						// if(page){
						// 	uni.redirectTo({
						// 		url: page
						// 	})
						// }else{
							uni.redirectTo({
								url:'/pages/index/index'
							})
						// }
					}
					this.isfromlogin = false;
				}catch(e){
					//TODO handle the exception
					console.log(e)
					uni.showToast({
						title:'网络异常'
					})
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
.login{
	width: 100%;
	margin-top: 80px;
	display: flex;
	align-items: center;
	flex-direction: column;
	.btn{
		margin-top: 40px;
		height:39px;
		background:rgba(229,229,233,1);
		border-radius:5px;
		font-size:15px;
		font-family:PingFang SC;
		font-weight:bold;
		color:rgba(119,130,152,1);
		border: none;
	}
	.success{
		background:rgba(64,89,255,1);
		font-size:15px;
		font-family:PingFang SC;
		font-weight:bold;
		color:rgba(255,255,255,1);
	}
	.input{
		height: 35.5px;
		width: 80%;
		position: relative;
		.input-placeholder{
			font-size:13px;
			font-family:PingFang SC;
			font-weight:500;
			color:rgba(174,178,192,1);
		}
		image{
			position: absolute;
			top: 12px;
			width: 15px;
			height: 13px;
		}
		input{
			height: 100%;
			padding-left: 15px;
			border-bottom: 1px solid rgba(248,246,248,1);
		}
	}
}
.status{
	line-height: 26px;
	text-align: center;
	width: 75px;
	height: 26px;
	background:rgba(248,249,250,1);
	border-radius:13px;
	font-size:12px;
	font-family:PingFang SC;
	font-weight:bold;
	color:rgba(72,79,100,1);
	margin-right: 45.5px;
}
.logo{
	margin: 113.5px auto;
	margin-bottom: 0px;
	width: 176px;
	height: 34px;
	image{
		width: 100%;
		height: 100%;
	}
}
</style>
